<template>
  <div class="swiper-container">
    <Swiper class="swiper" :modules="[Pagination]" :pagination="true">
      <SwiperSlide class="swiper-slide" v-for="i in 10" :key="i">
        <div>swiper-slide-{{ i }}</div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper/modules';
import 'swiper/css/pagination';
import 'swiper/css';

</script>
<style scoped lang="scss">

.swiper-container {
  width: 100%;
  height: 100%;
  .swiper {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    background-color: #ccc;
    width: 100% !important;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #fff;
  }
}
</style>
